<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <script src="./js/tools.js"></script>
    <script src="./js/swiper.js"></script>
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        #header {
            /* width: 4.14rem; */
            height: 0.4rem;
        }

        #header .headerbox {
            display: flex;
            justify-content: space-between;
        }

        #header .headerbox input:nth-of-type(1) {
            width: 3rem;
            height: 0.33rem;
        }

        #header .headerbox input:nth-of-type(2) {
            width: .33rem;
            height: 0.33rem;
            border-radius: 50%;
        }

        #header .headerbox a img {
            width: .33rem;
            height: .33rem;
            border-radius: 50%;
        }

        #slidel {
            height: 1.5rem;
        }

        #slidel .swiper-container {
            widows: 4.14rem;
            ;
            height: 1.5rem;
        }

        #slidel .swiper-container .swiper-wrapper .swiper-slide img {
            widows: 4.14em;
            ;
            height: 1.5rem;
        }

        #nav {
            height: 1rem;
        }

        #nav .navbox {
            display: flex;
            justify-content: space-around;
        }

        #nav .navbox a div:nth-of-type(1) img {
            width: .55rem;
            height: .55rem;
        }

        #nav .navbox a div:nth-of-type(2) {
            font-size: .14rem;
        }

        #content {
            flex: 1;
            overflow-y: auto;
        }

        #content .content-box {
            width: 4.14rem;
            height: 3.5rem;
            display: flex;
            flex-wrap: wrap;
        }

        #content .content-box>div {
            width: 1.93rem;
            height: 3.5rem;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        #content .content-box>div>div:nth-of-type(1) {
            width: 1.93rem;
            height: 2.6rem;
        }

        #content .content-box>div>div:nth-of-type(1) img {
            width: 1.91rem;
            height: 2.6rem;
        }

        #content .content-box>div>div:nth-of-type(2) {
            flex: 1;
        }

        /* #content .content-box>div>div:nth-of-type(2){
            display: flex;
            flex-direction: column;
        } */
        #content .content-box>div>div:nth-of-type(2) a>div:nth-of-type(1) {
            font-size: 0.16rem;
            color: #999999;
            text-align: left;
        }

        #content .content-box>div>div:nth-of-type(2) a>div:nth-of-type(2) {
            font-size: 0.22rem;
            color: red;
            text-align: left;
        }

        #content .content-box>div>div:nth-of-type(2) a:nth-of-type(1)>input {
            position: absolute;
            bottom: 0;
            width: .8rem;
            height: .3rem;
        }

        #content .content-box>div>div:nth-of-type(2) a:nth-of-type(2)>input {
            position: absolute;
            bottom: 0;
            width: .8rem;
            height: .3rem;
            margin-left: 1rem;
        }

        #footer {
            height: .5rem;
        }

        #footer .footer-box {
            height: .5rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        #footer .footer-box a {
            display: block;
            font-size: .2rem;
            color: #999999;
            /* text-align: center; */
        }
    </style>
</head>

<body>
    <!-- header start 头部-->
    <div id="header">
        <div class="headerbox tou">
            <a href="./mycenter.html"><img src="http://localhost/image/touxiang/tou.jpg" alt=""></a>
            <input type="text" placeholder="搜索框" id="txt">
            <input type="button" id="btn2">
        </div>
    </div>
    <!-- header end -->
    <!-- slide start 轮播-->
    <div id="slidel">
        <div class="swiper-container" id="s1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="http://localhost/image/lb/lb1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="http://localhost/image/lb/lb2.jpg" alt=""></div>
            </div>
        </div>
    </div>
    <!-- slide end -->
    <!-- nav start 导航-->
    <div id="nav">
        <div class="navbox">
            <a href="">
                <div><img src="http://localhost/image/nav/nav1.jpg" alt=""></div>
                <div>女装</div>
            </a>
            <a href="">
                <div><img src="http://localhost/image/nav/nav2.png" alt=""></div>
                <div>服饰</div>
            </a>
            <a href="">
                <div><img src="http://localhost/image/nav/nav3.png" alt=""></div>
                <div>鞋子</div>
            </a>
            <a href="">
                <div><img src="http://localhost/image/nav/nav4.jpg" alt=""></div>
                <div>裤子</div>
            </a>
            <a href="">
                <div><img src="http://localhost/image/nav/nav5.jpg" alt=""></div>
                <div>护肤品</div>
            </a>
        </div>
    </div>
    <!--nav end  -->
    <!-- content start 内容-->
    <div id="content">
        <div class="content-box">
       <!-- <div>
                <div><a href=""><img src="http://localhost/image/content/content4.jpg" alt=""></a></div>
                <div>
                    <a href="">
                        <div>靴子鞋子</div>
                        <div>￥100</div>
                        <input type="button" value="立即购买">
                    </a>
                    <a><input type="button" value="收藏"></a>
                </div>
            </div> -->
        </div>
    </div>
    <!-- content end -->
    <!-- footer start 尾部-->
    <div id="footer">
        <div class="footer-box dibu">
            <a href="./index.html">首页</a>
            <a href="./rdian.html">热点</a>
            <a href="./shopping.html">购物车</a>
            <a href="./scang.html">收藏</a>
            <a href="./mycenter.html">我的</a>
        </div>
    </div>
    <!-- footer end -->
</body>
<script src="./js/index.js"></script>
<script>
   
</script>

</html>